<template>
    <div id="stores_list">
        <el-card class="mg-b-10">
            <div class="check_box">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <div class="grid-content">
                            <el-input size="mini" suffix-icon="el-icon-search" placeholder="请输入查询信息"></el-input>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content">
                            <el-select class="select-prefix" size="mini" v-model="storeType" placeholder="请选择门店类型" filterable>
                                <template slot = "prefix">
                                    <span class = 'prefixSlot'>门店类型</span>
                                </template>
                                <el-option
                                    v-for="item in $Options.storeTypes"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content">
                            <el-select class="select-prefix" size="mini" v-model="storeStatus" placeholder="请选择门店状态" filterable>
                                <template slot = "prefix">
                                    <span class = 'prefixSlot'>门店状态</span>
                                </template>
                                <el-option
                                    v-for="item in $Options.commonStatus"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </el-col> 
                    <el-col :span="6">
                        <div class="grid-content col_float_right">
                           <el-button size="mini" type="primary" @click="isShowCreate= true">新建门店</el-button>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-card>
        <el-card class="mg-t-10">
            <el-table :data="tableData">
                <el-table-column label="编号" prop="storeNo" width="100"></el-table-column>
                <el-table-column label="名称" prop="warehouseName" show-overflow-tooltip></el-table-column>
                <el-table-column label="类型" prop="warehouseType">

                </el-table-column>
                <el-table-column label="状态">
                    <template slot-scope="scope">
                        <el-tag size="mini" :type="scope.row.isLocked == 1 ? 'danger' : 'success'">{{scope.row.isLocked == 1 ? '停用' : '启用'}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="地址"></el-table-column>
                <el-table-column label="电话"></el-table-column>
                <el-table-column label="备注"></el-table-column>
                <el-table-column label="时间"></el-table-column>
                <el-table-column label="操作" width="80">
                    <template slot-scope="scope">
                        <el-dropdown size="small" type="text" trigger="click" placement="bottom-start">
                            <span class="el-dropdown-link" style="font-size: 12px; cursor: pointer">
                                操作<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown" >
                                <el-dropdown-item command="a" @click.native="handleEditStore(scope.row)" >查看</el-dropdown-item>
                                <el-dropdown-item command="b" @click.native="handleUpdateStore(scope.row)" >{{scope.row.isLocked == 1 ? '停用' : '启用'}}</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
            <page :total="total" :page="page" :size="size" @handlepagechange="handlePageChange" @handleSizeChange="handleSizeChange"></page>
        </el-card>
        <createStoreTpl v-if="isShowCreate" :isShowCreate= 'isShowCreate' :type= "type" @cancelShow= "cancelShow"></createStoreTpl>
    </div>
</template>
<script>
    import createStoreTpl from './createStoreTpl'
    import page from '../../commonComponents/page'
    import axios from 'axios'
    export default {
        components: {createStoreTpl, page},
        data() {
            return {
                page: 1,
                size: 10,
                total: 1,
                isShowCreate: false,
                storeStatus: '',
                storeType: '',
                tableData: [],
                type: ''
            }
        },
        mounted() {
            this.getStoresList()
           

        },
        methods: {
            
            getStoresList() {
                let params= {
                    page: this.page,
                    size: this.size
                }
                try{
                    this.$server.systemControlApi.getSystemStoresList(params).then(res => {
                        this.tableData= res.data
                        this.total= res.total
                    })
                }catch(err) {
                    this.$paramsError(err)
                }
            },
            cancelShow(title) {
                this.isShowCreate= title
            },
            handlePageChange(page) {
                this.page= page
            },
            handleSizeChange(size) {
                this.size= size
            },
            /**产卡编辑仓库 */
            handleEditStore(scope) {},
            /**更新仓库状态 */
            handleUpdateStore(scope) {},

        }
    }
</script>